<template>
  <div class="common-wrap">
    <QueryForm
      ref="conditionForm"
      module="port"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length != 1"
          :disabledEdit="multipleSelection.length != 1"
          :hasPermiAdd="['common:port:add']"
          :hasPermiDelete="['common:port:delete']"
          :hasPermiEdit="['common:port:edit']"
          @add="onAdd"
          @edit="onEdit"
          @delete="onDelete"
        ></ButtonGroup>
      </el-row>
      <MyTable
        tableId="port"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        ref="commonTable"
        moduleName="port"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
    </div>
    <Add
      v-if="dialogVisible"
      v-model:visible="dialogVisible"
      :currRow="currRow"
      :isType="isType"
      @onSubmit="onSearch"
    ></Add>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import Add from "./components/add.vue";
import * as api from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { hasPermi } from "@/utils/mUtils.js";
import { queryFormColumnFilters, getSubZhEn,characterSegmentation } from "@/utils/mUtils.js";
import i18n from "@/lang/index.js";
let { t } = useI18n();

defineOptions({
  name: "Port",
});
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(true);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "type",
    title: "港口类型",
    formatter: ({ row }) => {
      return row.type == 1 ? t("海港") : t("机场");
    },
  },
  {
    field: "portCode",
    title: "港口编码",
  },
  {
    field: "portName",
    title: "港口名称(中文)",
  },
  {
    field: "portNameEn",
    title: "港口名称(英文)",
  },
  {
    field: "provinceCityArea",
    title: "国家/省/市/区",
    formatter: ({ row }) => {
      return  characterSegmentation(row,["countryName","provinceName","cityName","areaName"])
    },
  },
  {
    field: "lineName",
    title: "线路",
  },
  {
    field: "enableFlag",
    title: "状态",
    slots: {
      default: ({ row }) => {
        return [
          <el-switch
            disabled={!hasPermi(["common:port:switch"])}
            v-model={row.enableFlag}
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe694"
            active-value={1}
            inactive-value={0}
            onChange={() => {
              onChangeType(row);
            }}
          ></el-switch>,
        ];
      },
    },
  },
  {
    field: "remark",
    title: "备注",
  },
  {
    field: "createByName",
    title: "创建人",
  },
  {
    field: "createTime",
    title: "创建时间",
  },
  {
    field: "updateByName",
    title: "更新人",
  },
  {
    field: "updateTime",
    title: "更新时间",
  },
]);
const searchForm = ref({
  provinceCityArea: [],
});
const searchColumn = ref([
  {
    type: "label_select",
    label: "港口类型",
    options: [
      {
        label: "海港",
        value: 1,
      },
      {
        label: "机场",
        value: 2,
      },
    ],
    prop: "type",
  },
  {
    type: "label_input",
    label: "港口编码",
    prop: "portCode",
  },
  {
    type: "label_input",
    label: "港口名称(中文)",
    prop: "portName",
  },
  {
    label: "国家/省/市/区",
    propSelectCode: "countryCode",
    propSelectName: "countryName",
    propSelectAdd: "countryAdd",
    prop: "provinceCityArea",
    type: "label_province_city_area",
    propSelectOptions: [],
    propSelectPlaceholder: "国家",
    propsSelect: {
      value: "countryCode",
      label: "countryName",
      keyAdd: "countryAdd",
    },
    parmasKey: {
      provinceName: "provinceName",
      provinceCode: "provinceCode",
      cityName: "cityName",
      cityCode: "cityCode",
      areaName: "areaName",
      areaCode: "areaCode",
    },
    options: [],
    props: {
      value: "areaCode",
      label: "areaName",
      children: "children",
    },
    placeholder: "省/市/区(县)",
    onCascaderChange: (argeObj) => {
      searchForm.value = { ...searchForm.value, ...argeObj };
    },
    span: 12,
  },
  {
    type: "label_select",
    options: [],
    label: "线路",
    prop: "lineCode",
  },
  {
    type: "label_select",
    options: [
      {
        label: "启用",
        value: "1",
      },
      {
        label: "禁用",
        value: "0",
      },
    ],
    label: "状态",
    prop: "enableFlag",
  },
]);
const dialogVisible = ref(false);
const multipleSelection = ref([]);
const currRow = ref({});
const isType = ref("add");
onMounted(() => {
  onSearch();
  onGetSub();
});
const onGetSub = () => {
  getSubZhEn({
    code: "013",
  }).then((res) => {
    queryFormColumnFilters(searchColumn.value, "lineCode").options = res["013"];
  });
};
const list = () => {
  loading.value = true;
  const params = {
    ...searchForm.value,
    pageNum: pageVo.currentPage,
    pageSize: pageVo.pageSize,
  };
  delete params.provinceCityArea;
  api.default.common.port
    .list({
      ...params,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const onAdd = () => {
  isType.value = "add";
  if (multipleSelection.value.length != 0) {
    currRow.value = multipleSelection.value[0];
  }
  dialogVisible.value = true;
};
const onEdit = () => {
  isType.value = "edit";
  currRow.value = multipleSelection.value[0];
  dialogVisible.value = true;
};
const onChangeType = (row) => {
  api.default.common.port.edit({ ...row }).then(() => {
    onSearch();
  });
};
const onDelete = () => {
  const ids = multipleSelection.value.map((item) => item.id);
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.common.port.remove(ids).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
</script>

<style lang="scss" scoped>
.pcMenu {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>